
<template>
  <Modal v-model="visible" :title="`配置角色(${names})`" @on-cancel="cancel">
    <Form
      :model="formItem"
      class="from-box"
      :rules="ruleValidate"
      ref="formValidate"
      :label-width="120"
    >
      <Form-item label="角色(可多选)" style="font-size: 18px">
        <Checkbox
          @on-change="changeRole(item)"
          v-model="item.ischeck"
          v-for="item in RoleList"
          :value="item.id"
          :key="item.id"
          >{{ item.roleName }}</Checkbox
        >
      </Form-item>
      <slot name="footer"></slot>
    </Form>
    <div slot="footer" class="dialog-footer">
      <!-- <Button type="primary" @click="conform">确定</Button>
      <Button @click="cancel">取消</Button> -->
    </div>
  </Modal>
</template>

<script>
import {
  getRoleList,
  postUserRole,
  getUserInfo,
  deleteUserRole
} from '@/api/system/user.js'
export default {
  name: 'Detail',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userID: {
      type: Number,
      default: -1
    },
    names: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      formItem: {
        roleID: '',
        explan: ''
      },
      RoleList: [],
      nowData: '',
      ruleValidate: {
        roleID: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change',
            type: 'number'
          }
        ]
      }
    }
  },
  mounted () {},
  watch: {
    visible (val) {
      if (val) {
        this.getRoleList()
      }
    }
  },
  methods: {
    // 获取用户详情
    getUserInfo (id, data) {
      if (id === -1) {
        return
      }
      let that = this
      getUserInfo(id).then((res) => {
        if (res.status === 200) {
          // const items = res.data;
          that.resetData(data, res.data.roles)
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    resetData (data, roleData) {
      if (!data && data.length === 0) {
        this.RoleList = []
        return
      }
      if (!roleData && data.length === 0) {
        this.RoleList = []
        return false
      }

      for (let i = 0; i < data.length; i++) {
        let fitem = data[i]
        for (let j = 0; j < roleData.length; j++) {
          let sitem = roleData[j]
          if (fitem.id === sitem.id) {
            data[i].ischeck = true
          }
        }
      }
      console.log(data)
      this.RoleList = data
    },
    changeRole (item) {
      let that = this
      let params = {
        userID: Number(that.userID),
        roleID: item.id
      }
      if (!item.ischeck) {
        deleteUserRole(params).then((res) => {
          if (res.status === 200) {
            that.$Message.success('配置成功！')
            that.getRoleList()
          } else {
            that.$Message.warning('请求失败，请联系管理员！')
          }
        })
      } else {
        postUserRole(params).then((res) => {
          if (res.status === 200) {
            that.$Message.success('配置成功！')
            that.getRoleList()
          } else {
            that.$Message.warning('请求失败，请联系管理员！')
          }
        })
      }
    },
    cancel () {
      this.$emit('closeRoleModel')
    },
    getRoleList () {
      let that = this
      getRoleList().then((res) => {
        if (res.status === 200) {
          that.getUserInfo(Number(this.userID), res.data)
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  button:nth-child(1) {
    margin-right: 20px;
  }
}
.from-box {
  /deep/.ivu-select {
    .ivu-select-selected-value {
      color: #000000 !important;
    }
  }
  /deep/ .ivu-form .ivu-form-item-label {
    font-display: 20px !important;
  }
}
</style>
